<?php
session_start();
$usuario_logado = $_SESSION['current_user'];
?>
<!DOCTYPE html>
<?php //include_once $_SERVER["DOCUMENT_ROOT"] . '/JuventudeSlz/controller/ParticipanteController.php'; ?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Participante</title>

        <!-- FONTES -->
        <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'/>
        <link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css'/>
        <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,600' rel='stylesheet' type='text/css'>

        <!-- ESTILO -->
        <link href="../css/estilo2.css" rel="stylesheet" type="text/css"/>
        <!--        <link href="../css/formulario.css" rel="stylesheet" type="text/css"/>-->
        <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <link href="../css/kube.css" rel="stylesheet" type="text/css"/>


        <!-- SCRIPTS-->
        <script src="../script/jquery-1.8.2.min.js"></script>
        <script src="../script/jquery.cycle.all.js"></script>  
        <script src="../script/jquery.validate.min.js"></script> 
        <script src="../script/valida.js"></script> 
        <script src="../script/jquery-ui-1.9.1.custom.min.js"></script>
        <script src="../script/jquery.maskedinput-1.3.min.js"></script> 
        <script src="../script/jquery.alphanumeric.js"></script> 

        <script type="text/javascript">
            $('#header-img').cycle();
            
            //Calendario
            $(function(){
                $('#inNascimento').datepicker({
                    changeMonth:true,
                    changeYear:true,
                    dateFormat:"dd/mm/yy",
                    monthNamesShort:["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
                    defaultDate:new Date(1985,01,01)
                });
            });
            
            //Mask
            $(function(){
                $('#inNascimento').mask("99/99/9999");
                $('#inCep').mask("99999-999");
                $('#inTel').mask("(99)9999-9999");
                $('#inTelRes1').mask("(99)9999-9999");
                $('#inTelRes2').mask("(99)9999-9999");
            });
            
            //Alpha Numeric
            $(function(){
                $('#inNome').alpha({
                    allow:" "
                });
                
                $('#inCracha').alpha({
                    allow:" "
                });
                
                $('#inBairro').alpha({
                    allow:" "
                });
                
                $('#inCidade').alpha({
                    allow:" "
                });
                
                $('#inNomeRes1').alpha({
                    allow:" "
                });
                
                $('#inNomeRes2').alpha({
                    allow:" "
                });
                
                $('#inRg').numeric({
                    allow:"-"
                });
            })
            
            //Disable and Enable
            $(function(){
                $('#radio-group').hide();
                $('#info_ale_ali').hide();
                $('#info_ale_med').hide();
                
                $('#info_ale_ali').click(function(){
                    $('#info_ale_ali').val('');
                });
                
                $('#info_ale_med').click(function(){
                    $('#info_ale_med').val('');
                });
                
                $('#no_eucaristia').click(function(){
                    $('#radio-group').show(); 
                });
                
                $('#has_eucaristia').click(function(){
                    $('#radio-group').hide(); 
                });
                
                $("#alergia_ali_yes").click(function(){
                    $('#info_ale_ali').show();
                });
                
                $("#alergia_ali_no").click(function(){
                    $('#info_ale_ali').hide();
                });
                
                $("#alergia_med_yes").click(function(){
                    $('#info_ale_med').show();
                });
                
                $("#alergia_med_no").click(function(){
                    $('#info_ale_med').hide();
                });
            });
            
        </script>
        <style>
            .forms{
                width: 650px;
                margin: auto;
                font-family: "Josefin Sans", cursive, monospace;
                font-size: 20px;                
            }
            input[type="text"]{
                font-family: "Englebert", cursive, monospace;
                font-size: 16px;
            }
            .columnar{
                text-align: left;
            }

            .ui-datepicker{
                font-size: 12px;
                background-color: #fff;
            }

            .ui-datepicker-header{
                border:0;
                background-color: #336699;
            }
            label.error{
                /*                z-index: 1;*/
                position: absolute;
                margin-left: 270px;
                margin-top: -30px;
            }

            .left-100{
                left: -100px;
            }
            
            .shadow-simple{
                box-shadow: 0px 0px 10px 0px #ccc;
            }
                        
        </style>
    </head>
    <body>
        <?php include("layout/topo.php"); ?>
        <div id="page">
            <p>Cadastro de Participante</p>
            <form action="confirmacao_participante.php" method="POST" id="form" class="forms columnar">
                <fieldset class="shadow-simple">
                    <legend class="shadow-simple">Dados pessoais</legend>
                    <ul>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Nome</label>
                                <input type="text" id="inNome" name="inNome" class="width-100">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Nome Cracha</label>
                                <input type="text" id="inCracha" name="inCracha" class="width-50">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Nascimento</label>
                                <input type="text" id="inNascimento" name="inNascimento">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">RG</label>
                                <input type="text" id="inRg" name="inRg" class="width-50">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Sexo</label>
                                <input type="radio" name="inSexo" value="masculino"/>
                                &nbsp;Masculino
                                <input type="radio" name="inSexo" value="feminino"/>
                                &nbsp;Feminino
                            </fieldset>
                        </li>
                    </ul>
                </fieldset>
                <fieldset class="shadow-simple">
                    <legend class="shadow-simple">Localização</legend>
                    <ul>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Endereço</label>
                                <input type="text" id="inEnd" name="inEnd" class="width-100">
                            </fieldset>                            
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Cep</label>
                                <input type="text" id="inCep" name="inCep" class="width-50">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Bairro</label>
                                <input type="text" id="inBairro" name="inBairro" class="width-50">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Cidade</label>
                                <input type="text" id="inCidade" name="inCidade" class="width-50">
                            </fieldset>
                        </li>
                    </ul>
                </fieldset>
                <fieldset class="shadow-simple">
                    <legend class="shadow-simple">Sobre o Acamp's</legend>
                    <ul>
                        <li>
                            <fieldset class="left-100">
                                <label id="lb_ocupacao" class="bold"> O que você fará na parte da tarde no Acampamento?</label>
                                <input type="radio" name="ocupacao" value="1"/>
                                &nbsp;Seminário de Vida
                                <input type="radio" name="ocupacao" value="0" />
                                &nbsp;Aprofundamento
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label id="lb_eucaristia" class="bold"> Você possui Eucaristia?</label>
                                <input id="has_eucaristia"type="radio" name="eucaristia" value="1"/>
                                &nbsp;Sim
                                <input id="no_eucaristia" type="radio" name="eucaristia" value="0" />
                                &nbsp;Não
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <span id="radio-group">
                                    <label id="lb_fara_eucaristia" class="bold"> Deseja fazer Eucaristia?</label>
                                    <input id="do_eucaristia_yes" type="radio" name="do_eucaristia" value="1"/>                    
                                    &nbsp;Sim
                                    <input id="do_eucaristia_no" type="radio" name="do_eucaristia" value="0" />
                                    &nbsp;Não
                                </span>
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label id="lb_ali_propria" class="bold"> Você utilizará alimentação fornecida por nós?</label>
                                <input type="radio" name="alimentacao_propria" value="1"/>
                                &nbsp;Sim
                                <input type="radio" name="alimentacao_propria" value="0" />
                                &nbsp;Não
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label id="lb_barraca_propria" class="bold"> Você utilizará barraca própria?</label>
                                <input type="radio" name="barraca_propria" value="1"/>
                                &nbsp;Sim
                                <input type="radio" name="barraca_propria" value="0" />
                                &nbsp;Não
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label id="lb_trans_proprio" class="bold"> Você utilizará o transporte fornecido por nós?</label>
                                <input type="radio" name="transporte_proprio" value="1"/>
                                &nbsp;Sim
                                <input type="radio" name="transporte_proprio" value="0" />
                                &nbsp;Não
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label id="lb_alergia" class="bold"> Você possui Alergia à alimentos?</label>
                                <input id="alergia_ali_yes" type="radio" name="alergia_alimentos" value="1"/>
                                &nbsp;Sim
                                <input id="alergia_ali_no" type="radio" name="alergia_alimentos" value="0" />
                                &nbsp;Não
                                <textarea id="info_ale_ali" cols="50" rows="4" name="info_alergia_ali" >Quais?</textarea>
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label id="lb_alergia_med" class="bold"> Você possui Alergia à medicamentos?</label>
                                <input id="alergia_med_yes" type="radio" name="alergia_medicamentos" value="1"/>
                                &nbsp;Sim
                                <input id="alergia_med_no" type="radio" name="alergia_medicamentos" value="0" />
                                &nbsp;Não
                                <textarea id="info_ale_med" cols="50" rows="4" name="info_alergia_med">Quais?</textarea>
                            </fieldset>
                        </li>
                    </ul>
                </fieldset>
                <fieldset class="shadow-simple">
                    <legend class="shadow-simple">Contato</legend>
                    <ul>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Email</label>
                                <input type="text" id="inEmail" name="inEmail" class="width-100">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Telefone</label>
                                <input type="text" id="inTel" name="inTel" class="width-50">
                            </fieldset>
                        </li>
                        <label style="background-color: #ccc; width: 100%; text-align: left">Responsável 1</label>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Nome</label>
                                <input type="text" id="inNomeRes1" name="inNomeRes1" class="width-100">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Telefone</label>
                                <input type="text" id="inTelRes1" name="inTelRes1" class="width-50">
                            </fieldset>
                        </li>

                        <label style="background-color: #ccc; width: 100%; text-align: left;">Responsável 2</label>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Nome</label>
                                <input type="text" id="inNomeRes2" name="inNomeRes2" class="width-100">
                            </fieldset>
                        </li>
                        <li>
                            <fieldset class="left-100">
                                <label class="bold">Telefone</label>
                                <input type="text" id="inTelRes2" name="inTelRes2" class="width-50">
                            </fieldset>
                        </li>
                    </ul>
                </fieldset>
                <input type="submit" value="Confirmar"/>
            </form>
        </div>
        <?php include("layout/rodape.php"); ?>
    </body>
</html>
